<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .strstyle{
            color: red;
            font-size: 20px;
            font-weight: 700;
            position: absolute;
            top: -50px;
        }
    </style>
</head>
<body>
    <h1>蛇形文字A</h1>
    <hr>

    <script>
        var msg = '鹅鹅鹅,曲项向天歌,白毛浮绿水,红掌拨清波';
        for (var i = 0; i < msg.length; i++){
            document.write('<span id="str'+i+'"class="strstyle">');
            document.write(msg[i]);
            document.write('</span>');
        }

        //绑定鼠标移动事件
        
        document.onmousemove = function(e){
            e = e || window.event;
            document.title ='X: '+e.x+'| Y:'+e.y;
            var m = 0;
            var timer = setInterval(function(){
                if (m < msg.length){
                    snake(e.x, e.y, m);
                    m++;
                }else{
                    clearInterval(timer);
                }
            },150)
        }

        function snake(x,y,m){
            var span = document.getElementById('str'+m);
            span.style.left = x + (m*30) +'px';
            span.style.top = y + 'px';
        }
    </script>
</body>
</html>